<template>
  <div class="contenthf1">
    <div class="top" v-if="!phoneStyle">
      <div class="top_left">
        <RadioGroup v-model="siteChoose" type="button" @on-change="siteClick">
          <Radio :label="item.site_id" v-for="item in siteList">{{item.name}}</Radio>
        </RadioGroup>
      </div>
      <div class="top_right">
        <div class="buttons">
          <Button :type="page == 1?'primary':null" @click="pageTurning(1)">第1页</Button>
          <Button :type="page == 2?'primary':null" @click="pageTurning(2)">第2页</Button>
          <Button :type="page == 3?'primary':null" @click="pageTurning(3)">第3页</Button>
          <Button :type="page == 4?'primary':null" @click="pageTurning(4)">第4页</Button>
        </div>
      </div>
    </div>
    <div class="top_phone" v-else>
      <div class="tp_options">
        <Dropdown trigger="click" @on-click="equipmentClick">
          <Button type="primary">
            {{returnEquipment(siteChoose)}}
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem v-for="item in siteList" :name="item.site_id">{{item.name}}</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
    </div>
    <div class="point" v-for="(item,index) in sketchData.items" :key="index" v-if="index < (page * size) && index >= (page - 1) * size && sketchData.unit_id == 1" :style="phoneStyle?'height:20rem':''">
      <div class="imgs">
        <img src="../../../../../assets/img/points/a.png" v-show="item.id == 1"/>
        <img src="../../../../../assets/img/points/b.png" v-show="item.id == 2"/>
        <img src="../../../../../assets/img/points/c.png" v-show="item.id == 3"/>
        <img src="../../../../../assets/img/points/d.png" v-show="item.id == 4"/>
        <img src="../../../../../assets/img/points/e.png" v-show="item.id == 5"/>
        <img src="../../../../../assets/img/points/f.png" v-show="item.id == 6"/>
        <img src="../../../../../assets/img/points/g.png" v-show="item.id == 7"/>
        <img src="../../../../../assets/img/points/h.png" v-show="item.id == 8"/>
        <img src="../../../../../assets/img/points/i.png" v-show="item.id == 9"/>
        <img src="../../../../../assets/img/points/j.png" v-show="item.id == 10"/>
        <img src="../../../../../assets/img/points/k.png" v-show="item.id == 11"/>
        <img src="../../../../../assets/img/points/l.png" v-show="item.id == 12"/>
        <img src="../../../../../assets/img/points/m.png" v-show="item.id == 13"/>
        <img src="../../../../../assets/img/points/n.png" v-show="item.id == 14"/>
        <img src="../../../../../assets/img/points/o.png" v-show="item.id == 15"/>
        <img src="../../../../../assets/img/points/p.png" v-show="item.id == 16"/>
        <img src="../../../../../assets/img/points/q.png" v-show="item.id == 17"/>
        <img src="../../../../../assets/img/points/r.png" v-show="item.id == 18"/>
        <img src="../../../../../assets/img/points/s.png" v-show="item.id == 19"/>
        <img src="../../../../../assets/img/points/t.png" v-show="item.id == 20"/>
        <img src="../../../../../assets/img/points/u.png" v-show="item.id == 21"/>
      </div>
        <div :class="val.isClick == 0?'label':'label isClick'" v-for="(val,ind) in item.pointList" :style="{top:val.y + '%',left:val.x + '%'}">
          <Poptip title="问题详情" :content="pointClick(val)" v-if="val.num > 0">
            {{val.name}}<span style="margin-left: 3px">[{{val.num}}]</span>
          </Poptip>
          <div v-else>
            {{val.name}}
          </div>
        </div>
      <!--<div id="showResult" v-if="resultShow">-->

      <!--</div>-->
    </div>
    <div class="point" v-for="(item,index) in sketchData.items" :key="index" v-if="index < (page * size) && index >= (page - 1) * size && sketchData.unit_id == 6" :style="phoneStyle?'height:20rem':''">
      <div class="imgs">
        <img src="../../../../../assets/img/points3/1.jpg" v-show="item.id == 1"/>
        <img src="../../../../../assets/img/points3/2.jpg" v-show="item.id == 2"/>
        <img src="../../../../../assets/img/points3/3.jpg" v-show="item.id == 3"/>
        <img src="../../../../../assets/img/points3/4.jpg" v-show="item.id == 4"/>
        <img src="../../../../../assets/img/points3/5.jpg" v-show="item.id == 5"/>
        <img src="../../../../../assets/img/points3/6.jpg" v-show="item.id == 6"/>
        <img src="../../../../../assets/img/points3/7.jpg" v-show="item.id == 7"/>
        <img src="../../../../../assets/img/points3/8.jpg" v-show="item.id == 8"/>
        <img src="../../../../../assets/img/points3/9.jpg" v-show="item.id == 9"/>
        <img src="../../../../../assets/img/points3/10.jpg" v-show="item.id == 10"/>
        <img src="../../../../../assets/img/points3/11.jpg" v-show="item.id == 11"/>
        <img src="../../../../../assets/img/points3/12.jpg" v-show="item.id == 12"/>
        <img src="../../../../../assets/img/points3/13.jpg" v-show="item.id == 13"/>
        <img src="../../../../../assets/img/points3/14.jpg" v-show="item.id == 14"/>
        <img src="../../../../../assets/img/points3/15.jpg" v-show="item.id == 15"/>
      </div>
        <div :class="val.isClick == 0?'label':'label isClick'" v-for="(val,ind) in item.pointList" :style="{top:val.y + '%',left:val.x + '%'}">
          <Poptip title="问题详情" :content="pointClick(val)" v-if="val.num > 0">
            {{val.name}}<span style="margin-left: 3px">[{{val.num}}]</span>
          </Poptip>
          <div v-else>
            {{val.name}}
          </div>
        </div>
      <!--<div id="showResult" v-if="resultShow">-->

      <!--</div>-->
    </div>
    <div class="point" v-for="(item,index) in sketchData.items" :key="index" v-if="index < (page * size) && index >= (page - 1) * size && sketchData.unit_id == 8" :style="phoneStyle?'height:20rem':''">
      <div class="imgs">
        <img src="../../../../../assets/img/points3/1.jpg" v-show="item.id == 1"/>
        <img src="../../../../../assets/img/points3/2.jpg" v-show="item.id == 2"/>
        <img src="../../../../../assets/img/points3/3.jpg" v-show="item.id == 3"/>
        <img src="../../../../../assets/img/points3/4.jpg" v-show="item.id == 4"/>
        <img src="../../../../../assets/img/points3/5.jpg" v-show="item.id == 5"/>
        <img src="../../../../../assets/img/points3/6.jpg" v-show="item.id == 6"/>
        <img src="../../../../../assets/img/points3/7.jpg" v-show="item.id == 7"/>
        <img src="../../../../../assets/img/points3/8.jpg" v-show="item.id == 8"/>
        <img src="../../../../../assets/img/points3/9.jpg" v-show="item.id == 9"/>
        <img src="../../../../../assets/img/points3/10.jpg" v-show="item.id == 10"/>
        <img src="../../../../../assets/img/points3/11.jpg" v-show="item.id == 11"/>
        <img src="../../../../../assets/img/points3/12.jpg" v-show="item.id == 12"/>
        <img src="../../../../../assets/img/points3/13.jpg" v-show="item.id == 13"/>
        <img src="../../../../../assets/img/points3/14.jpg" v-show="item.id == 14"/>
        <img src="../../../../../assets/img/points3/15.jpg" v-show="item.id == 15"/>
      </div>
        <div :class="val.isClick == 0?'label':'label isClick'" v-for="(val,ind) in item.pointList" :style="{top:val.y + '%',left:val.x + '%'}">
          <Poptip title="问题详情" :content="pointClick(val)" v-if="val.num > 0">
            {{val.name}}<span style="margin-left: 3px">[{{val.num}}]</span>
          </Poptip>
          <div v-else>
            {{val.name}}
          </div>
        </div>
      <!--<div id="showResult" v-if="resultShow">-->

      <!--</div>-->
    </div>
  </div>
</template>

<script>
  import cookie from 'js-cookie';
  export default {
    props: ['sketchData'],
    name: "sketch_hanfeng",
    data() {
      return {
        isAdmin: cookie.get('isAdmin'),
        page: 1,
        size: 6,
        total: 0,
        siteList: [],
        siteChoose: null,
        phoneStyle: false,
        resultShow: false,
        resultData: []
      }
    },
    mounted() {
      let self = this
      let dw = document.body.clientWidth
      if (dw < 820) {
        self.phoneStyle = true
        self.size = 21
        self.page = 1
      } else {
        self.size = 6
        self.page = 1
        self.phoneStyle = false
      }
      setTimeout(() => {
        self.siteList = self.sketchData.device_list
      },500)
    },
    methods: {
      pageTurning(index){
        let self = this
        self.page = index
      },
      siteClick(item) {
        let self = this
        self.$emit('changeSite',item)
      },
      returnEquipment(id) {
        let self = this
        for (let i = 0; i < self.siteList.length; i++) {
          if (id == self.siteList[i].site_id) {
            return self.siteList[i].name
          }
        }
      },
      equipmentClick(item) {
        let self = this
        self.siteChoose = item
      },
      pointClick(val) {
        let self = this
        let str = ''
        for (let i = 0; i < val.reason.length; i++) {
          str += val.reason[i].name + ':' + val.reason[i].num + '次；'
        }
        return str
      }
    },
  }
</script>

<style lang="less" scoped>
  .contenthf1 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: #f9f9f9;
    max-height: 700px;
    .top{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      height: 50px;
      background: #fff;
      border-bottom: 1px solid #e5e5e5;
      border-right: 1px solid #e5e5e5;
      .top_left{
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 16px;
        label:last-child{
          margin-left: 16px;
          border-radius: 4px;
        }
      }
      .top_right{
        display: flex;
        flex-direction: column;
        justify-content: center;
        button{
          margin-right: 16px;
        }
      }
    }
    .top_phone{
      width: 100%;
      height: 52px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 52px;
      background: #fff;
      border-bottom: 1px solid #e5e5e5;
      .tp_options{
        width: 40%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        padding-left: 10px;
        .ivu-dropdown{
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }
    }
    .point{
      width: 33.33%;
      height: 49.7%;
      border-right: 1px solid #e5e5e5;
      border-bottom: 1px solid #e5e5e5;
      position: relative;
      .imgs{
        width: 100%;
        height: 100%;
        background: #fff;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .label{
        position: absolute;
        left: 0;
        top: 0;
        padding: 1px 5px;
        border: 1px solid #3384dd;
        border-radius: 3px;
        cursor: pointer;
        font-size: 14px;
        color: #3384dd;
        display: flex;
        flex-direction: row;
      }
      .isClick{
        color: #fff;
        background: #ff0000;
        border-color: #ff0000;
      }
    }
  }
  #showResult{
    margin: auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 20%;
    display: flex;
    flex-direction: column;
  }
  /* 手机竖屏 */
  @media screen and (min-width: 0px) and (max-width: 850px) {
    .point{
      .label{
        font-size: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
      }
    }
    .point:last-child{
      margin-bottom: 66px;
    }
  }
</style>